<template>
    <div class="stubGroupDetailNew-wrap">
      <scrollList ref="cslist" :loadMore="false" :bounce="false">
        <div slot="defaultScroll">
          <div class="sg-dnitem" v-for="(item, index) in dnlist" :key="`${index}stubList`">
            <div class="dn-wrap">
              <div class="dn-thumb">
                <div class="thumb-box">
                  <h3><span :class="thumb(item.status, item).style">{{thumb(item.status, item).text ? thumb(item.status, item).text : status[item.status].text}}</span></h3>
                  <img :src="thumb(item.status, item).img">
                </div>
              </div>
              <div class="dn-desc">
                <h4>
                  <div class="dn-name">{{item.name}}</div>
                  <div class="dn-tag" v-if="item.parkingLockType">
                    地锁
                  </div>
                </h4>
                <div class="dn-info">
                  <div class="dn-label">车位号</div>
                  <div class="dn-num">{{item.parkingNo ? item.parkingNo : '暂无'}}</div>
                  <div class="dn-val">{{item.stubInfo.lockStatus ? (item.stubInfo.lockStatus === 1 ? '空闲' : '占用'): ''}}</div>
                  <div class="dn-tag-wrap mb-10">
                    <div :class="`dn-tag-btn${reserveStatus(item).reserve ? '' : ' disabled-tag'}`" v-if="item.parkingLockType && (item.reservable + '') === '1'"
                    @click.prevent.stop="reserveStatus(item).reserve && reserveBoot($event, item.name)" :id="item.id">
                      {{reserveStatus(item).canlock ? (reserveStatus(item).waitTime || reserveStatus(item).countDown || '预约') : '预约'}}
                    </div>
                    <div class="reserve-info" v-if="item.waitTime">预计等待{{item.waitTime}}</div>
                  </div>
                </div>
                <div class="dn-info">
                  <div class="dn-label">当前SOC:</div>
                  <div class="dn-val-blue">{{item.stubInfo.chargeSoc ? item.stubInfo.chargeSoc + '%' : '--'}}</div>
                  <div class="dn-val">预计充满:</div>
                  <div class="dn-val mr0">{{item.waitTime ? item.waitTime : '--'}}</div>
                  <div class="dn-tag-wrap">
                    <div :class="`dn-tag-btn${reserveStatus(item).canlock ? '' : ' disabled-tag'}`" v-if="item.parkingLockType && (item.reservable + '') === '1' && reserveStatus(item).canlock" :id="item.id" @click.prevent.stop="reserveStatus(item).canlock && unlock($event)">降地锁</div>
                  </div>
                </div>
                <div class="dn-info">
                  <div class="bd-l">{{item.kw}}KW</div>
                  <div class="bd-l">{{type[item.type]}}</div>
                  <div class="bd-l">电压:{{item.voltageLowerLimit}}v - {{item.voltageUpperLimit}}v</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scrollList>
    </div>
</template>

<script type="text/ecmascript-6">
  import scrollList from '@/components/scroll/list';
  import { sgDetailNew } from '@/mock/mock';
  import functionalTool from '@/utils/functionTools';
  import Jsbridge from '@/utils/jsbridge';
  export default {
    name: 'stubGroupDetailNew',
    data () {
      return {
        status: {
          '00': {
            text: '空闲',
            img: 'https://app-cdn.starcharge.com/state_05.png',
            style: 'free'
          },
          '0B': {
            text: '已插枪',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_02.png',
            style: 'yellow'
          },
          '0C': {
            text: '已预约',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_01.png',
            style: ''
          },
          '01': {
            text: '充电中',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_02.png',
            style: 'yellow'
          },
          '02': {
            text: '故障',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_03.png',
            style: 'disable'
          },
          '03': {
            text: '车位占用',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_02.png',
            style: 'yellow'
          },
          '04': {
            text: '维护中',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_03.png',
            style: 'disable'
          },
          '06': {
            text: '在建中',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_03.png',
            style: 'disable'
          },
          '05': {
            text: '离线',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_03.png',
            style: 'disable'
          },
          '07': {
            text: '桩程序升级',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_03.png',
            style: 'disable'
          },
          '08': {
            text: '预约等待充电中',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_02.png',
            style: 'yellow'
          },
          '09': {
            text: '储能车储能中',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_04.png',
            style: 'default'
          },
          '99': {
            text: '删除',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_03.png',
            style: 'disable'
          },
          'FF': {
            text: '锁定',
            img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_02.png',
            style: 'yellow'
          }
        },
        type: {
          '0': '交流电',
          '1': '直流电',
          '2': '交直流'
        },
        parkingType: {
          '1': '住宅',
          '2': '酒店',
          '3': '商场',
          '4': '办公',
          '5': '体育休闲',
          '6': '汽车服务',
          '7': '公共停车场',
          '8': '内部停车场',
          '9': '其他'
        },
        parkingLock: {
          lockStatus: {
            '0': '地锁降下',
            '1': '地锁升起',
            '2': '地锁故障'
          }
        },
        dnlist: [],
        pattern: /00|01|0B|0C|03|08/,
        jsbridge: new Jsbridge()
      }
    },
    computed: {
      thumb (s, item) {
        return (s, item) => {
          if (item) {
            if (item.type !== 0) {
              if (item.countDown) {
                return {
                  text: '已预约',
                  style: '',
                  img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_01.png'
                };
              } else if (item.waitTime) {
                return {
                  style: 'yellow',
                  img: 'https://app.starcharge.com/app/starcharge/mobile4/images/state_02.png'
                };
              } else {
                return {
                  style: this.status[s].style,
                  img: this.status[s].img
                };
              }
            } else {
              return {
                style: this.status[s].style,
                img: this.status[s].img
              };
            }
          } else {
            return {};
          }
        }
      },
      reserveStatus (item) {
       return (item) => {
         // 倒计时不为空
         if (item.countDown) {
           if (item.countDownFlag) {
             // 用户已预约，显示预约倒计时
             return {
               reserve: !1,
               canlock: !0,
               countDown: item.countDown
             };
           } else {
             // 等待中，显示预计等待时间
             return {
               reserve: !1,
               canlock: !0,
               waitTime: item.waitTime
             }
           }
         } else if (item.waitTime) {
           if (item.reserveFlag) {
             // 显示预约等待时间
             return {
               canlock: !1,
               reserve: !0,
               waitTime: item.waitTime
             };
           } else {
             // 被其他用户预约
             return {
               canlock: !1,
               reserve: !1,
               waitTime: item.waitTime
             };
           }
         } else if (item.status.match(this.pattern) && item.reserveFlag) {
           return {
             canlock: !0,
             reserve: !0
           };
         } else {
           return {
             canlock: !1,
             reserve: !1
           };
         }
       }
      }
    },
    created () {
      this.initList().then(() => {
        this.$nextTick(() => {
          this.$refs.cslist && this.$refs.cslist._initComponent();
        });
      });
    },
    mounted () {

    },
    methods: {
      async initList () {
        try {
          let resData = (await sgDetailNew({
            id: functionalTool.getUrlParam('id') || '5977cf7e-6485-4dad-b638-90de6b4327e0',
            tabType: +functionalTool.getUrlParam('tabType') || 1,
            gisType: functionalTool.getUrlParam('gisType'),
            lat: functionalTool.getUrlParam('lat'),
            lng: functionalTool.getUrlParam('lng'),
            userId: functionalTool.getUrlParam('userId'),
            stubType: functionalTool.getUrlParam('stubType')
          })).data;
          if (resData.code === '200') {
            resData.data && (this.dnlist = resData.data.stubList);
          }
        } catch (e) {
          console.log(e);
        }
      },
      unlock (e) {
        const id = e.currentTarget.id;
        this.jsbridge.call('gotoDropPackingLock', {
          stubId: id
        });
      },
      reserveBoot (e, name) {
        const id = e.currentTarget.id;
        this.jsbridge.call('stubReservation', {
          stubId: id,
          stubName: name,
          stubtype: functionalTool.getUrlParam('stubType'),
          mapGcj02Lat: functionalTool.getUrlParam('lat'),
          mapGcj02Lng: functionalTool.getUrlParam('lng')
        });
      }
    },
    components: {
      scrollList
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
@import '~@/assets/css/mixin.styl';
  .stubGroupDetailNew-wrap
    position relative
    height 100%
    .sg-dnitem
      padding rpx(20) 0
      font-size rpx(26)
      border-1px(#ccc, 1px, solid)
      .dn-wrap
        display flex
        .dn-thumb
          display flex
          flex 0 0 rpx(180)
          width rpx(180)
          justify-content center
          align-items center
          border-right-1px(#ccc)
          .thumb-box
            width rpx(140)
            text-align right
            & h3
              font-size 0
              text-align left
              & span
                display inline-block
                font-size rpx(20)
                padding rpx(10) rpx(8) rpx(8) rpx(8)
                background-color #00abff
                color #fff
                border-radius rpx(6)
                max-width rpx(140)
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
              & .yellow
                background-color #e97d3c
              & .disable
                background-color #ccc
              & .default
                background-color #999
              & .free
                background-color #7cca58
            & img
              margin-top rpx(18)
              width rpx(98)
              height rpx(108)
        .dn-desc
          flex 1
          padding-left rpx(30)
          & h4
            display flex
            align-items center
            margin-bottom rpx(16)
            position relative
            .dn-name
              font-size rpx(32)
              margin-right rpx(16)
            .dn-tag
              border-1px-all(#e97d3c, 2px, solid)
              padding rpx(7) rpx(8)
              font-size rpx(22)
              box-sizing content-box
              color #e97d3c
            .dn-tag-btn
              position absolute
              top 0
              right rpx(10)
              padding rpx(7) rpx(12)
              line-height rpx(27)
              font-size rpx(22)
              box-sizing content-box
              height rpx(27)
              background-color #00a0e9
              border-radius rpx(4)
              color #fff
              &.disabled-tag
                background-color #999
          .dn-info
            display flex
            line-height rpx(40)
            flex-wrap wrap
            position relative
            .dn-label
              margin-right rpx(14)
            .dn-num
              font-weight bold
              color #e97d3c
              margin-right rpx(20)
            .dn-val
              color #999
              margin-right rpx(10)
            .mr0
              margin-right 0
            .dn-val-blue
              color #00abff
              margin-right rpx(10)
            .bd-l
              color #999
              margin-top rpx(7)
              margin-right rpx(10)
              height rpx(26)
              line-height rpx(26)
              padding-left rpx(10)
              border-left-1px(#ccc)
              &:first-child
                border none
                padding-left 0
                border-left-1px(#fff)
            .dn-tag-wrap
              position absolute
              overflow hidden
              width rpx(180)
              top rpx(-10)
              right rpx(4)
              text-align center
              .dn-tag-btn
                display inline-block
                padding rpx(4) rpx(25)
                font-size rpx(20)
                box-sizing content-box
                background-color #00a0e9
                text-align center
                color #fff
                margin-bottom rpx(20)
                border-radius rpx(27)
                border none
                &.disabled-tag
                  background-color #999
              .reserve-info
                width rpx(100)
                margin 0 auto
                font-size rpx(20)
                line-height rpx(26)
                color #999
            .mb-10
              top rpx(-30)
</style>
